<template>
  <div>
    <div class="table-data">
        <div class="search-box">
          <el-input size="small" v-model="searchMap.keyword" placeholder="卡号"></el-input>
          <el-select v-model="searchMap.status" clearable placeholder="全部状态">
            <el-option label="已激活" value="1"></el-option>
            <el-option label="未激活" value="0"></el-option>
          </el-select>
          <el-date-picker
                  v-model="dateTime"
                  type="datetimerange"
                  value-format="yyyy-MM-dd hh:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
          </el-date-picker>
          <el-button type="primary" size="small" @click="handleSearch"> 搜索</el-button>
        </div>
        <el-table
                v-loading="loading"
                element-loading-text="正在加载"
                element-loading-spinner="el-icon-loading" :data="tableData" :header-cell-style="headClass"  style="width:100%"  class="table-box">
          <el-table-column label="序号" prop="id" ></el-table-column>
          <el-table-column label="卡号" prop="card_number"></el-table-column>
          <el-table-column label="密码" prop="card_pass"></el-table-column>
          <el-table-column label="激活二维码" prop="card_qrcode" >
              <template slot-scope="scope">
                  <el-popover placement="right" title="" trigger="hover" v-if="scope.row.card_qrcode">
                      <img :src="scope.row.card_qrcode" style="max-width: 300px; max-height: 300px;"/>
                      <img slot="reference" class="commodity-image"  style="max-width: 50px; max-height: 50px;" :src="scope.row.card_qrcode" :alt="scope.row.card_qrcode">
                  </el-popover>
              </template>
          </el-table-column>
          <el-table-column label="份额" prop="amount"></el-table-column>
          <el-table-column label="发放时间" prop="created_at"></el-table-column>
          <el-table-column label="是否激活" prop="status_str"></el-table-column>
          <el-table-column label="激活人信息" prop="wx_user">
              <template slot-scope="scope">
                  <div class="commodity-name" v-if="scope.row.wx_user">
                      <el-popover placement="right" title="" trigger="hover">
                          <img :src="scope.row.wx_user.wx_avator" style="max-width: 300px; max-height: 300px;"/>
                          <img slot="reference" class="commodity-image" :src="scope.row.wx_user.wx_avator" :alt="scope.row.wx_user.wx_avator">
                      </el-popover>
                      <p style="width: 300px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap" >{{scope.row.wx_user.wx_nickname}}</p>
                  </div>
              </template>
          </el-table-column>
          <el-table-column label="激活时间" prop="activation_at"></el-table-column>
        </el-table>
        <div class="pages" ref="page-box">
          <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :page-sizes="[10,30,50]"
                  :page-size="size"
                  layout="total,sizes,prev,pager,next,jumper"
                  :total="total"
          ></el-pagination>
        </div>
      </div>
  </div>
</template>
<script lang="ts">
  import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
  import activityManage from "@/api/activityManage";
  @Component({
      components: { }
  })
  export default class activityManageClass extends Vue {

    @Provide() tableData: any = []; // 表格数据
    @Provide() dateTime: any = ["",""]; // 时间
    @Provide() page: number = 1; // 当前page
    @Provide() size: number = 10; // 请求数据的个数 默认5
    @Provide() total: number = 0; // 总数据条数
    @Provide() loading: Boolean = true; // 是否显示加载图标
    @Provide() searchMap: any = { // 搜索内容
      keyword:'',
      begin_time:'',
      end_time:'',
      status:'',
      id:''
    };

    headClass() {
      return "text-align: center;background:#eef1f6;";
    }

    created() {
      this.loadData();
    }

    loadData() {
      this.searchMap.id = this.$route.query.id;
      console.log(this.searchMap);
      activityManage.activityDetail(this.page,this.size, this.searchMap)
        .then((res: any) => {
          // console.log(res); return false;
          if(res.data.code==200) {
            this.tableData = res.data.data.list;
            this.total = res.data.data.total;
            this.loading = false
          }
        });
    }

    handleSizeChange(val: number): void {
      this.size = val;
      this.page = 1;
      this.loadData();
    }

    handleCurrentChange(val: number): void {
      this.page = val;
      this.loadData();
    }

    handleSearch() {
      // 点击搜索
      this.page = 1;
      // 点击搜索
      if(this.dateTime==null){
        this.dateTime=["",""]
      }
      this.searchMap.begin_time=this.dateTime[0]
      this.searchMap.end_time=this.dateTime[1]
      this.loadData();
    }
  }
</script>

<style lang="scss" scoped>
    .el-range-editor.el-input__inner{
        margin-left: 10px;
    }
    .el-button+.el-button {
        margin: 5px;
    }
    .order-bot,.order-top{
        background: rgba(242, 242, 242, 0.99);
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
    }
    .order-top{
        span{
            margin-right: 30px;
        }
    }
    .order-bot{
        span{
            color: red;
        }
    }
    .el-table .cell {
        text-align: center ;
    }
    .commodity-name{
        display:flex;
        flex-wrap: nowrap;
        height: 40px;
        .commodity-image{
            width: 40px;
            height:40px;
        }
        p{
            margin:auto 10px;
        }
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 100%;
    }
</style>